// useState，Fragment，function
// import { Fragment, useState } from "react";
// export default function App() {
//     const list = [{id:1,name:"1"},{id:2,name:"2"},{id:3,name:"3"}]
//     const content = list.map(item =>(
//         <Fragment key={item.id}>
//             <li>{item.name}</li>
//             <li>------------------------</li>
//         </Fragment>
//     ))
//     const title = "标签标题"
//     const [divContent,setDivContent] = useState("标签内容")
//     const [divContent1,setDivContent1] = useState({id:1,content:"标签内容1"})
//     const [data,setData] = useState([{id:1,name:"1"},{id:2,name:"2"},{id:3,name:"3"}])
//     const dataContent = data.map(item=>(<li key={item.id}>{item.name}</li>))
//     function handleClick(e){
//         console.log("点击了按钮",e)
//         setDivContent("新标签内容")
//         setDivContent1({...divContent1,content:"新标签内容1"})
//         // setData([
//         //     ...data,
//         //     {id:4,name:"4"}
//         // ])
//         setData(data.filter(item=>item.id!=2))
//     }
//     return ( 
//         <>
//         <div title={title}> { divContent } </div>
//         <div title={title}> { divContent1.content } </div>
//         <ul>{content}</ul>
//         <ul>{dataContent}</ul>
//         <button onClick={handleClick}>点击</button>
//         </>
//     );
// }

// 父组件，子组件，props，默认插槽，具名插槽
// function Detail({content,active}){
//     return (
//         <>
//         <div>{content}</div>
//         <p>状态：{active ? "激活" : "隐藏"}</p>
//         </>
//     )
// }
// function Article({children, title, detailData, footer}){
//     return (
//         <>
//             <div>{title}</div>
//             <Detail {...detailData}></Detail>
//             {children}
//             {footer}
//         </>
//     )
// }
// export default function App(){
//     const articleData = {
//         title: "1",
        
//         detailData:{
//             content: "内容",
//             active: true
//         }
//     }
//     return (
//         <Article {...articleData} footer={<p>这是页面底部</p>}>
//             <p>测试插槽</p>
//         </Article>
//     )
// }

// 子组件往父组件传值，设置一个props的方法给子组件，子组件调用这个方法传递参数
// import { useState } from "react"
// function Detail({onActive}){
//     const [status,setStatus] = useState(true)
//     function handleClick(e){  
//         setStatus(!status)
//         onActive(status)
//     }
//     return (
//         <>
//         <button onClick={handleClick}>点击</button>
//         <div style={{
//             display: status?'block':'none'
//         }}>内容</div>
//         </>
//     )
// }
// export default function App(){
//     function handleActive(status){  
//         console.log(status)
//     }
//     return (
//         <>
//         <Detail onActive={handleActive}>
//         </Detail>
//         </>
//     )
// }

// useContext：进行多级组件传值
// import { createContext, useContext } from "react";
// export function Section({ children }) {
//     const level = useContext(LevelContext);
//     return (
//       <section className="section">
//         <LevelContext.Provider value={level + 1}>
//           {children}
//         </LevelContext.Provider>
//       </section>
//     );
// }
// export function Heading({ children }) {
//     const level = useContext(LevelContext);
//     switch (level) {
//       case 0:
//         throw Error('Heading must be inside a Section!');
//       case 1:
//         return <h1>{children}</h1>;
//       case 2:
//         return <h2>{children}</h2>;
//       case 3:
//         return <h3>{children}</h3>;
//       case 4:
//         return <h4>{children}</h4>;
//       case 5:
//         return <h5>{children}</h5>;
//       case 6:
//         return <h6>{children}</h6>;
//       default:
//         throw Error('Unknown level: ' + level);
//     }
// }
// const LevelContext = createContext(0);
// export default function App() {
//     return (
//       <Section>
//         <Heading>Title</Heading>
//         <Section>
//           <Heading>Heading</Heading>
//           <Heading>Heading</Heading>
//           <Heading>Heading</Heading>
//           <Section>
//             <Heading>Sub-heading</Heading>
//             <Heading>Sub-heading</Heading>
//             <Heading>Sub-heading</Heading>
//             <Section>
//               <Heading>Sub-sub-heading</Heading>
//               <Heading>Sub-sub-heading</Heading>
//               <Heading>Sub-sub-heading</Heading>
//             </Section>
//           </Section>
//         </Section>
//       </Section>
//     );
// }

// 井字棋
// import { useState } from "react";
// import "./style.css";
// export function Square({value,handleClick}) {
//     return <button className="square" onClick={handleClick}>{value}</button>;
// }
// export function Border({list,next,handlePlay}) {
    
//     function handleClick(i){
//         if(calculateWinner(list) || list[i]){
//             return;
//         }
//         const nextList = list.slice()
//         if (next) {
//             nextList[i] = 'X';
//         } else {
//             nextList[i] = 'O';
//         }
//         handlePlay(nextList)
//     }

//     const winner = calculateWinner(list)
//     let status;
//     if(winner){
//         status = "Winner: " + winner;
//     }else{
//         status = next ? "next:O" : "next:X";
//     }
//     return (
//         <>
//         <div className="board-row">
//             {status}
//         </div>
//         <div className="board-row">
//             <Square value={list[0]} handleClick={()=>(handleClick(0))}></Square>
//             <Square value={list[1]} handleClick={()=>(handleClick(1))}></Square>
//             <Square value={list[2]} handleClick={()=>(handleClick(2))}></Square>
//         </div>
//         <div  className="board-row">
//             <Square value={list[3]} handleClick={()=>(handleClick(3))}></Square>
//             <Square value={list[4]} handleClick={()=>(handleClick(4))}></Square>
//             <Square value={list[5]} handleClick={()=>(handleClick(5))}></Square>
//         </div>
//         <div  className="board-row">
//             <Square value={list[6]} handleClick={()=>(handleClick(6))}></Square>
//             <Square value={list[7]} handleClick={()=>(handleClick(7))}></Square>
//             <Square value={list[8]} handleClick={()=>(handleClick(8))}></Square>
//         </div>
//         </>
//     );
// }
// export default function App() {
//     const [history,setHistory] = useState([Array(9).fill(null)])
//     const [currentMove,setCurrentMove] = useState(0)
//     const next = currentMove % 2 === 0;
//     const current = history[currentMove]

//     function handlePlay(nextList){
//         const nextHistory = [...history.slice(0, currentMove + 1), nextList];
//         setHistory(nextHistory)
//         setCurrentMove(nextHistory.length-1)
//     }

//     const moves = history.map((item,index)=>{
//             let description
//             if(index>0){
//                 description = "#"+index
//             }else{
//                 description = "start"
//             }
//             return (
//                 <button key={index} onClick={()=>{}} >{description}</button>
//             )
//         })
        
//     return (
//        <>
//        <Border list={current} next={next} handlePlay={handlePlay}></Border>
//        {moves}
//        </>
//     );
// }
// function calculateWinner(list){
//     const win = [
//         [0,1,2],
//         [3,4,5],
//         [6,7,8],
//         [0,4,8],
//         [2,4,6],
//         [0,3,6],
//         [1,4,7],
//         [2,5,8]
//     ]
//     for (let index = 0; index < win.length; index++) {
//         const [a,b,c] = win[index];
//         if(list[a] && list[a] === list[b] && list[a] === list[c]){
//             return list[a]
//         }
//     }
//     return null
// }


// useReducer:可以更好的管理一个状态的多种复杂操作
// import { useReducer } from "react"
// function countReducer(state,action){
//     switch(action.type){
//         case "+":
//             return state+1
//         case "-":
//             return state-1
//         default:
//             throw new Error()
//     }
// }
// export default function App(){
//     const [state,dispatch] = useReducer(countReducer,0)
//     const handleIncrement = ()=>{dispatch({type:"-"})}
//     const handleDecrement = ()=>{dispatch({type:"+"})}
//     return (
//         <div style={{padding:10}}>
//         <button onClick={handleIncrement}>-</button>
//         <span> {state} </span>
//         <button onClick={handleDecrement}>+</button>
//         </div>
//     )
// }

// useRef：实现子组件功能访问
// import { forwardRef, useImperativeHandle, useRef } from "react"
// const Child = forwardRef(function(props,ref){

//     useImperativeHandle(ref,()=>({
//         // 暴露给父组件的方法
//         myFn:()=>(
//             console.log("子组件的myFn方法")
//         )
//     }))

//     return <div>子组件</div>
// })
// export default function App(){
//     const childRef = useRef()
//     function handleClick(){
//         childRef.current.myFn()
//     }
//     return (
//         <div>
//             <Child ref={childRef}></Child>
//             <button onClick={handleClick}>+</button>
//         </div>
//     )
// }

// useEffect: 副作用函数，组件加载或者组件更新的时候执行一些副作用
// import { useEffect, useState } from "react"
// export default function App(){
//     const [count,setCount] = useState(0)
//     const handleIncrement = ()=>{setCount(count-1)}
//     const handleDecrement = ()=>{setCount(count+1)}
//     // 默认组件创建后和组件重新渲染会自动执行，开启了严格模式，会执行两次
//     // useEffect(()=>{
//     //     console.log("useEffect")
//     // })
//     // 只在组件创建后执行一次
//     // useEffect(()=>{
//     //     console.log("useEffect")
//     // },[])
//     // 组件创建后和count变化会自动执行
//     useEffect(()=>{
//         console.log("useEffect")
//     },[count])
//     return (
//         <div style={{padding:10}}>
//         <button onClick={handleIncrement}>-</button>
//         <span> {count} </span>
//         <button onClick={handleDecrement}>+</button>
//         </div>
//     )
// }

// useMemo:数据缓存的钩子
// 例：如果不使用useMemo，不管是点击更新按钮，还是更新input都会访问Child，但现在的逻辑是只需要更新input的时候执行复杂计算
// import {useCallback, useMemo, useState } from "react"
// function Child({number}){
//     let result = useMemo(()=>{
//         console.log("访问了Child")
//         let result=0;
//         for(let i=0;i<10000000;i++){
//             result += number*2;
//         }
//         return result
//     },[number])
//     return (
//     <>
//         <div>
//             <p>输入的值：{number}</p>
//             <p>计算后的值：{result}</p>
//         </div>
//     </>)
// }
// export default function App(){
//     const [count,setCount] = useState(0)
//     const [number,setNumber] = useState(50)
//     const handleDecrement = ()=>{setCount(count+1)}

//     return (
//         <div style={{padding:10}}>
//             <span>更新的值 {count} </span>
//             <p></p>
//             <button onClick={handleDecrement}>更新</button>
//             <p></p>
//             <input type="number" value={number} onChange={(e)=>setNumber(e.target.value)}></input>
//             <p></p>
//             <Child number={number}></Child>
//         </div>
//     )
// }

// useCallback :缓存的是函数，不使用这个的话父组件每次更新子组件都会重新渲染
// memo: 记忆组件  + useCallback设置成缓存函数
import {useCallback, useState , memo} from "react"
const Child = memo(function ({onClick}){
    console.log("子组件重新渲染")
    return (
        <div>
            <button onClick={onClick}>子组件</button>
        </div>
    )
})
export default function App(){
    const [count,setCount] = useState(0)
    const handleDecrement = ()=>{setCount(count+1)}
    const handleClick = useCallback(()=>{
        console.log("子组件点击")
    },[])
    return (
        <div style={{padding:10}}>
            <span>Count:{count} </span>
            <p></p>
            <button onClick={handleDecrement}>更新</button>
            <p></p>
            <Child onClick={handleClick}></Child>
        </div>
    )
}